<template>
    <!--index.wxml-->
    <view class="detai-template">

        <view class="sec_item ul parts">

          
            <view class="marekt" >
                
                <view class="marketInfo">
                
                    <!-- <image class="imgBox" :src="$getImg( json.flashSupermarketModel.logo )" mode="aspectFit" lazy-load="false"/> -->

                    <view class="imgBox">
                        <text class="iconfont icon-dianpu col "></text>
                    </view>
                      
                    <view class="info-right" v-if="json.orderExpressModelList[0]">
                        <view  class="market-name">
                            {{ json.orderExpressModelList[0].expressName }}
                        </view>
                        <view  class="market-addr">
                            {{ json.orderExpressModelList[0].expressAddress }}( {{ json.orderExpressModelList[0].contactsPhone }} )
                        </view>     
                    </view>
                          
                </view>
                  
            </view>
              
            <view class="head-tit">
                <text>邮件信息</text>
            </view>

            <view class="li" v-for=" goodsItem,idx in json.orderExpressModelList" :key='goodsItem.id'>
                <view class="p productBox">
     
                    <view class="info">
                        <view class="info-l">
                            <view class="info-item ">
                                
                                <view class="info-item-con ">
                                    <text class="nums">
                                        <text class="icon-tubiaozhizuo- iconfont col-red"></text> 取件码：
                                    </text>
                                    <text class="big">
                                        {{ goodsItem.pickUpCode }}
                                    </text>
                                 </view>
                               
                            </view>
                            <view class="info-item ">
                                
                                <text class="nums">
                                    联系人：
                                </text>
                        
                                <text class="desc">
                                    {{ goodsItem.name || '无' }}
                                </text>
                            </view>
                            <view class="info-item ">
                                
                                <text class="nums">
                                    联系电话：
                                </text>
                        
                                <text class="desc">
                                    {{ goodsItem.phone || '无' }}
                                </text>
                            </view>
                            <view class="info-item ">
                                
                                <text class="nums">
                                    备注信息：
                                </text>
                        
                                <text class="desc">
                                    {{ goodsItem.remark || '无' }}
                                </text>
                            </view>
                            <view class="info-item " v-if="goodsItem.pics && goodsItem.pics.length">
                        
                                <text class="nums">
                                    快递图片：
                                </text>
                                <view class="imgsBox">
                                    <view class="img" v-for="picItem,idx in goodsItem.pics" :key="idx">
                                        <text class="icon-delete iconfont del" @click.stop="deleFunc(goodsItem,idx)" v-if="handle"></text>
                                        <image :src="picItem" mode="scaleToFill" :lazy-load="true" @click.stop="viewPic(goodsItem, idx)"></image>
                                    </view>
                                </view> 
                              
                            </view>
                        </view>
                       
                    </view>
                </view>
                <view class="upload" @click="gchooseImg( goodsItem )" v-if="handle">
                    <text class="icon-yunshangchuan_o iconfont"></text>
                </view>  
            </view>
            <view class="priceBox text-right" v-if="json.orderStatus > 15 && isUser ">
                <text class="min">签收码:</text><text class="b col-red">{{json.signInCode }}</text>
            </view>
        </view>

        <view class="parts">
            <view class="head-tit">
                <text>订单信息</text>
            </view>

            <view class="line">

                <view class="l">
                    <text class="">下单时间</text>
                </view>
                <view class="r none">
                    <text>{{ json.createTime}}</text>
                </view>
            </view>
            <view class="line">

                <view class="l">
                    <text class="">订单编号</text>
                </view>
                <view class="r none">
                    <text>{{ json.orderNumber}}</text>
                </view>
            </view>

        </view>

    </view>
</template>
<script>
import {uploadFunc} from '../../api'
const app = getApp();
export default {
    props: ['json','showMore','handle' ,'isUser'],
    components: {},
    data () {
        return {
            testImg:'https://oss.qmxip.com/flash_goods/64d2f78899341e3389b108fef67da75d.jpg?x-oss-process=style/pc_news_resize',
            chooseOne:{},
        }
    },
    computed: {

    },
    mounted () {

    },
    methods: {
        //选择
        gchooseImg( row ) {

            console.log('101111',row)

            if(row.pics && row.pics.length >=6){

                uni.showToast({
						title: "最多支持6张图片",
						icon: "none"
                })
                return;

            }

            this.chooseOne = row

            let that = this
            uni.chooseImage({
                count: 6,
                // sizeType压缩图片
                sizeType: "compressed",
                success: (res) => {

                    console.log('999999999999',res)
                    // this.imgArr = res.tempFilePaths

                    

                    this.uploadMoreFunc( row , res.tempFilePaths )
                }
            })

        },
        //上传 小程序不支持多图 只能循环 一张一张上传
        uploadMoreFunc( row , filePath ){
            // uploadToDir  uploadToDirMultiUpload

            let arr = row.pics

            let that = this

            filePath.map(file =>{

                uploadFunc('zuul/api-f/files/uploadToDir',file ,{'formData':{'directory': 'flash_goods'}})
                    .then( res=>{
                        // console.log('上传看看',res)
                        arr.push( this.$getImg(res.id ,1)   )

                        if(arr.length == filePath.length){


                            console.log('执行了的',arr)

                            that.$set(row,'pics', arr)

                            that.$emit('update:json',that.json)

                        }
                    })

            })

          
        },
        //预览
        viewPic( row ,idx ){
            const urls = row.pics
            const current = idx
            uni.previewImage({
                urls,
                current
            })
			
        },
        //删除
        deleFunc( row ,idx ){

            row.pics.splice( idx,1)

            this.$emit('update:json',this.json)
        }
    }
}
</script>
<style lang="scss" scoped>
.head-tit {
    font-weight: bold;
    color: #000;
    font-size: 28rpx;
    margin-bottom: 20rpx;
}
.line {
    color: #565656;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10rpx 0;
    .l {
        text-align: left;
        margin-left: 10px;
        max-width: 500rpx;
        min-width: 160rpx;
    }
    .r {
        flex: 1;
        width: 100%;
        // border-bottom: 1rpx solid #f1f1f1;
        // padding-bottom: 20rpx;
        &.none {
            border: none;
        }
    }
    .b {
        // font-weight: bold;
    }
    .min {
        font-size: 24rpx;
    }
    ::v-deep .holderClass {
        color: #c1c1c1;
    }
    .icon {
        color: #c1c1c1;
        font-size: 24rpx;
        line-height: 38rpx;
    }
    .address {
        font-size: 22rpx;
        color: #565656;
    }
}
.priceBox {
    padding: 0 32rpx 10rpx;
    font-size: 34rpx;
    .min {
        font-size: 24rpx;
    }
}
.marekt{
    .marketInfo{
        display: flex;
        margin-bottom: 30rpx;
        .imgBox{
            width: 80rpx;
            height: 80rpx;
            // background: #f6f6f6;
            border-radius: 10rpx;
            margin-right: 20rpx;
            text-align: center;
            line-height: 80rpx;
            .iconfont{
                font-size: 80rpx;
            }
        }
        .info-right{
            flex: 1;
            .market-name{
                font-size: 28rpx;
                color: #000;
                margin-bottom: 4rpx;
            }
            .market-addr{
                font-size: 24rpx;
                color: #888;
            }
        }
    }
}

// 商品
.sec_item {
    padding-top: 28rpx;
    .li {
        display: flex;
        padding: 10rpx 0rpx 10rpx 10rpx;
        .upload{
            width: 80rpx;
            text-align: center;
            font-size: 60rpx;
        }
    }
    // border-bottom: 1px solid #f1f1f1;

    .productBox {
        flex: 1;
        display: flex;
        // .imgs {
        //     margin-right: 20rpx;
        //     image {
        //         width: 140rpx;
        //         height: 140rpx;
        //         background: #f1f1fe;
        //     }
        // }
        .info {
            display: flex;
            width: 100%;
            .info-l {
                flex: 1;
            }
            .info-r {
                text-align: right;
                min-width: 150rpx;
                margin-left: 10rx;
                font-size: 30rpx;
                .min {
                    font-size: 22rpx;
                }
            }
            .nums {
                display: inline-block;
                width: 80px;
                color: #888;
                font-size: 26rpx;
                text-align: right;
                
            }
            .info-item  {
                display: flex;
                font-size: 26rpx;
                color: #000;
                // 
                margin-bottom: 10rpx;
                .big{
                    font-size: 42rpx;
                    font-weight: bold;
                }
            }
            .imgsBox{
                flex: 1;
                display: inline-block;
                .img{
                    display: inline-block;
                    vertical-align: top;
                    margin: 0 10rpx 10rpx;
                    position: relative;
                    width: 100rpx;
                    height: 100rpx;
                    border: 1rpx dotted #eaeaea;
                    .del{
                        position: absolute;
                        right: 2rpx;
                        top: 2rpx;
                        z-index: 2;
                        color: #888;
                        background: #fff;
                        border-radius: 50%;
                        line-height: 1;
                    }
                }
                image{
                    width: 100%;
                    height: 100%;
                    border-radius: 3rpx;
                   
                    overflow: hidden;
                }
            }
           
        }
    }
}
</style>